<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 使用全局组件 -->
      <PageTools>
        <!-- 给具名插槽传数据 -->
        <template v-slot:before>
          共{{ total }}条记录
        </template>
        <!-- 右边插槽 -->
        <!-- v-slot:  可以简写为# -->
        <template #after>
          <el-button size="small" type="danger" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="success" @click="exportFn">导出</el-button>
          <el-button size="small" type="primary" @click="addFn">新增员工</el-button>
        </template>
      </PageTools>
      <el-card>
        <!-- 表格 -->
        <el-table :data="employees" border>
          <el-table-column label="序号">
            <template v-slot="{$index}">
              {{ $index+1 }}
            </template>
          </el-table-column>
          <el-table-column prop="staffPhoto" label="头像" width="120px" sortable="">
            <template v-slot="{row}">
              <img
                v-imgError="require('@/assets/common/bigUserHeader.png')"
                style="width: 100px"
                :src="row.staffPhoto"
                alt=""
              >
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column prop="workNumber" label="工号" sortable="" />
          <!-- 作用域插槽 实现 格式化 聘用形式-->
          <!-- <el-table-column prop="formOfEmployment" label="聘用形式" sortable="">
            <template v-slot="{row}">
              {{ row.formOfEmployment === 1 ? '正式' : '非正式' }}
            </template>
          </el-table-column>  -->
          <!-- formatter属性实现 格式化 聘用形式 -->
          <el-table-column :formatter="formatFormEmployment" prop="formOfEmployment" label="聘用形式" sortable="" />
          <el-table-column prop="departmentName" label="部门" sortable="" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable="">
            <template v-slot="{row}">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <!--
            账户状态
            当enableState的值为 1的时候 表示 此刻转换状态处于开启状态
            当值为0的时候，表示关闭状态

            这我们需要根据这个状态渲染不同的效果，这里我们使用elementUI提供的Switch组件来实现
           -->
          <el-table-column prop="enableState" label="账户状态" sortable="">
            <template v-slot="{row}">
              <!--
                value: 绑定Switch表单的值
                active-value：选中时的值
                inactive-value：未选中的值

                也就是说value绑定的值 等于active-value的值的时候 就是选中状态
                否则未选中状态
               -->
              <el-switch :value="row.enableState" :active-value="1" :inactive-value="0" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="roleFn(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination :page-size="size" layout="prev, pager, next" :total="total" @current-change="curChangeFn" />
        </el-row>
      </el-card>
      <!-- 新增弹窗 -->
      <Add :show-dialog.sync="showDialog" @updateEvent="getEmployeeList" />
      <!-- 分配角色 -->
      <AssignRole ref="assignRole" :user-id="userId" :show-dialog.sync="visibleDialog" />
    </div>
  </div>
</template>

<script>
import { getEmployees, delEmployees } from '@/api/employees'
import employees from '@/api/constant/employees'
import Add from './components/add.vue'
import { export_json_to_excel } from '@/vendor/Export2Excel.js'
import AssignRole from './components/assign-role.vue'
export default {
  components: { Add, AssignRole },
  data() {
    return {
      employees: [],
      total: 0,
      page: 1, // 请求的页码
      size: 5, // 请求的数量
      showDialog: false,
      visibleDialog: false,
      userId: ''
    }
  },
  created() {
    // 获取员工列表
    this.getEmployeeList()
  },
  methods: {
    // 分配角色
    roleFn(id) {
      this.visibleDialog = true
      this.userId = id
      // 获取子组件实例 调用子组件的方法 获取默认角色数据
      /**
       * 因为DOM更新是异步，而函数中的代码执行是同步的，因此
       * 当执行获取子组件实例调用其方法的时候，DOM(子组件)还未渲染完成
       * 也就意味着此刻父传子的id还没有传到子组件中，因此这里调用接口
       * 拿不到id就失败了。
       * 如何解决呢？
       * 答：当我们等待DOM更新完成后再来调用子组件中函数即可。
       * 如何等待DOM 更新完成呢？
       * 答：vue专门提供了一个方法，可以再DOM更新触发的，这个
       * 方法就是 $nextTick()
       *
       * */
      this.$nextTick(() => {
        // 这里是在DOM更新后触发
        this.$refs.assignRole.getRoleIds()
      })
    },

    // 导出
    async exportFn() {
      // 获取所有员工列表
      const res = await getEmployees({
        page: 1,
        size: this.total
      })
      // console.log(111, res)
      // // 学习导出插件的语法
      // const tHeader = ['手机号', '姓名', '入职日期', '转正日期', '工号']
      // const data = [
      //   [13244545465, '哈哈哈', '2022-9-16', '2022-9-18', '121212'],
      //   [13244545465, '嘿嘿嘿', '2022-9-16', '2022-9-18', '121213'],
      //   [13244545465, '呵呵呵', '2022-9-16', '2022-9-18', '121214']
      // ]

      const newData = res.rows.map(item => {
        const arr = []
        // 处理过程
        const obj = {
          mobile: '手机号',
          username: '姓名',
          timeOfEntry: '入职日期',
          correctionTime: '转正日期',
          workNumber: '工号'
        }
        for (const key in obj) {
          // key: 需要的属性名
          // item[key]: key属性对应在item中的值
          // console.log(136, key, item[key])
          arr.push(item[key])
        }
        return arr
      })
      const tHeader = ['手机号', '姓名', '入职日期', '转正日期', '工号']
      export_json_to_excel({
        header: tHeader, // 表头 类型是 数组
        data: newData // 导出的数据  类型是二维数组
      })
    },
    // 删除员工
    delFn(id) {
      this.$confirm('确定删除嘛？', '删除', {
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delEmployees(id)
        // 刷新列表
        this.getEmployeeList()
      }).catch(() => {
        console.log('点击了取消按钮')
      })
    },
    // 新增员工
    addFn() {
      this.showDialog = true
    },
    // 格式化聘用形式
    formatFormEmployment(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // cellValue: 当前单元格的内容
      // return cellValue === 1 ? '正式' : '非正式'
      // console.log(employees.hireType)
      const arr = employees.hireType.filter(item => {
        return item.id === cellValue
      })
      return arr[0] ? arr[0].value : '未知'
    },
    // 页码发生改变时触发的函数
    curChangeFn(curPage) {
      // console.log(curPage)
      // 将当前渲染的页数改为点击的页数
      this.page = curPage
      // 重新渲染列表
      this.getEmployeeList()
    },
    // 封装获取员工列表
    async getEmployeeList() {
      const res = await getEmployees({
        page: this.page, // 请求的页码
        size: this.size // 请求的数量
      })
      // console.log(res)
      // 保存员工列表
      this.employees = res.rows
      // 保存员工总数量
      this.total = res.total
    }
  }
}
</script>

<style>

</style>
